@import "../../assets/scss/core/base";

$checkbox-prefix-cls: #{$jigsaw-prefix}-checkbox;

.#{$checkbox-prefix-cls}-host {
    @include inline-block;
    &.#{$checkbox-prefix-cls}-error .#{$checkbox-prefix-cls}-wrapper {
        &:hover {
            > .#{$checkbox-prefix-cls} {
                border-color: $error-color;
            }
        }
        .#{$checkbox-prefix-cls} {
            border-color: $error-color;
        }
    }
}

.#{$checkbox-prefix-cls}-wrapper {
    position: relative;
    cursor: pointer;
    font-size: $font-size-base;
    display: inline-block;
    outline: none;
    line-height: 18px;
    vertical-align: text-bottom;
    user-select: none;
    left: 0;
    margin: 0;
    &:not(:last-child) {
        margin-right: 8px;
    }

    &:hover {
        > .#{$checkbox-prefix-cls} {
            border-color: $primary-color;
        }
    }

    .#{$checkbox-prefix-cls} {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        width: 14px;
        height: 14px;
        overflow: hidden;
        border: $border-width-base $border-style-base $border-color-base;
        border-radius: $border-radius-sm;
        background-color: #fff;
        transition: all .3s;

        &:after {
            transform: rotate(45deg) scale(0);
            position: absolute;
            left: 4px;
            top: 1px;
            width: 5px;
            height: 8px;
            border: 2px solid #fff;
            border-top: 0;
            border-left: 0;
            content: ' ';
            transition: all .1s $ease-in-back;
        }

        &-checked, &-indeterminate {
            background-color: $primary-color;
            border-color: $primary-color;
        }

        // 选中状态
        &-checked:after {
            transform: rotate(45deg) scale(1);
            position: absolute;
            left: 4px;
            top: 1px;
            width: 5px;
            height: 8px;
            border: 2px solid #fff;
            border-top: 0;
            border-left: 0;
            content: ' ';
            transition: all .2s $ease-out-back .1s;
        }

        &-indeterminate:after {
            transform: scale(1);
            position: absolute;
            left: 2px;
            top: 5px;
            width: 8px;
            height: 1px;
            content: ' ';
        }

        &-disabled {
            cursor: not-allowed;

            border-color: $border-color-base !important;
            background-color: $disabled-bg;

            & + span {
                color: #ccc;
                cursor: not-allowed;
            }
        }

        &-disabled:after {
            animation-name: none;
            border-color: #ccc;
        }
    }

    .#{$checkbox-prefix-cls}-label {
        vertical-align: middle;
        padding-left: 8px;
        padding-right: 8px;
        font-weight: normal;
    }
}
